<template>
    <div class="createQuestionModal">
        <Modal class="diy-modal" :class="'t'+this.type" v-model="modalShow" scrollable :title="`创建${questionName[type-1]}`" @on-ok="submit" @on-cancel="clear">
            <Form  :label-width="110">
                <FormItem label="分值" v-if="type!==4">
                    <InputNumber :max="100" :min="1" v-model="fm.score"></InputNumber>
                </FormItem>
                <FormItem label="题干">
                    <Input type="textarea" :rows="3"  v-model="fm.title"></Input>
                    <div class="color-red font-12 mt-1" style="line-height:20px" v-if="type===2">
                        <p>需填内容请用 ##正确答案## 表示，学生界面将隐藏！</p>
                        <p>为避免中文数字与阿拉伯数字产生差异。请统一使用阿拉伯数字。</p>
                        <p>例：中国有##56##个民族，人口有##14##亿。</p>
                    </div>
                </FormItem>
                <FormItem label="得分关键词" v-if="type===4">
                    <Input v-model="fm.answer"></Input>
                    <p class="color-red font-12 mt-1" >请以逗号隔开</p>
                </FormItem>
                <FormItem label="每个关键词得分" v-if="type===4">
                    <InputNumber :max="100" :min="0" v-model="fm.score"></InputNumber>
                </FormItem>
                <FormItem label="限时">
                    <InputNumber :max="300" :min="0" v-model="fm.limit_time"></InputNumber>
                    <span class="ml-1 color-999">单位分钟，为0则不限时</span>
                </FormItem>
                <FormItem label="是否多选" v-if="type===3">
                    <i-switch v-model="select_more" size="large">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-switch>
                </FormItem>
                <FormItem label="答案选项" v-if="type===1 || type===3">
                    <RadioGroup type="button" v-if="type===1"  v-model="fm.answer">
                        <Radio label="1">正确</Radio>
                        <Radio label="2">错误</Radio>
                    </RadioGroup>
                    <div v-else>
                        <Input search enter-button="新增选项" @on-search="add_answer_item" v-model="option_text" placeholder="请输入选项内容" />
                        <RadioGroup  v-if="!select_more" vertical class="mt-1"  v-model="fm.answer">
                            <Radio :label="index" v-for="(val,index) in options" :key="index">{{val}}</Radio>
                        </RadioGroup>
                         <CheckboxGroup v-else  vertical class="mt-1"  v-model="fm.answer">
                            <Checkbox class="d-block" :label="index" v-for="(val,index) in options" :key="index">{{val}}</Checkbox>
                        </CheckboxGroup>
                    </div>
                </FormItem>
                <FormItem label="附件列表">
                    <upload-button @set_files="set_files" v-if="modalShow"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import {deep_clone} from "@/common/tool"
import uploadButton from "./uploadButton"
export default {
    props:['type','openDialog','questionName'],
    data(){
        return {
            option_text:'',
            modalShow:false,
            loading:true,
            select_more:false,
            options:[],
            fm:{
                type:-1,
                score:1,
                option:'',
                limit_time:0,
                title:'',
                answer:'',
                files:''
            }
        }
    },
    methods:{
        set_files(listStr){
            this.fm.files=listStr
        },
        clear(){
            this.$emit('close')
            this.select_more=false
            this.options=[]
            this.fm={
                type:-1,
                score:0,
                option:'',
                limit_time:0,
                title:'',
                answer:'',
                files:[]
            }
        },
        add_answer_item(str){
            if(str && !this.options.includes(str)){
                this.options.push(str)
                this.option_text=''
            }
        },
        restart(str){
            this.modalShow=false
            this.$Modal.warning({
                title: '提交失败',
                content: str,
                onOk:()=>{
                    this.modalShow=true 
                }
            });
        },
        submit(){
            if(!this.fm.title){
                this.restart('请输入题干')
                return 
            }
            this.fm.type=this.type
            if(this.type===1){
                if(!this.fm.answer){
                    this.restart('请选择判断题答案')
                    return 
                }
                this.fm.option=[{id:1,text:'正确'},{id:2,text:'错误'}]
            }
            else if(this.type===2){
                const answer=this.fm.title.match(/##([^##]+)##/g)
                if(!answer || !answer.length){
                    this.restart('答案格式错误，请用##正确答案##表示！')
                    return 
                }
                this.fm.answer=answer.map(el=>el.replace(/##/g,"")).join(',')
                this.fm.title=this.fm.title.replace(/##([^##]+)##/g,"(####)")
            }else if(this.type===3){
                if(!this.options.length || (this.select_more?!this.fm.answer.length:!this.fm.answer.toString().length) ){
                    this.restart('请输入选项并选择答案')
                    return 
                }
                const zimu=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
                this.fm.answer=this.select_more?this.fm.answer.sort((a,b)=>a-b).map(el=>zimu[el]).join(','):zimu[this.fm.answer]
                this.fm.option=this.options.map((el,index)=>({text:el,index:zimu[index]}))

            }else if(this.type===4){
                if(!this.fm.answer ){
                    this.restart('请输入得分关键词')
                    return 
                }
                this.fm.answer=this.fm.answer.replace( /[,，]/g,',')
            }
            this.$emit('add',deep_clone(this.fm))
            this.clear()
        }
    },
    components:{
        uploadButton
    },
    watch:{
        openDialog(){
            this.modalShow=this.openDialog
        },
        select_more(){
            this.fm.answer=this.select_more?[]:''
        }
    }
}
</script>